/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, useTheme,Table,TableBody,TableRow,Cell,CCell, Button, Collapse
} from "customize-easy-ui-component";
import { DirectLink } from "../../../routing/Link";
import { ReportViewProps, } from "../../common/base";
import {分项末尾链接,} from "../../common/rarelyVary";
import {multilines2Html} from "../../tools";
import {useMainRepUrlOr, useSplitSubRepList} from "../../hook/useMainRepUrlOr";
import HashLinkObserver from "react-hash-link";
import {useContext} from "react";
import RoutingContext from "../../../routing/RoutingContext";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";

//正式报告的显示打印。 默认打印A4:210X297mm纸张。
//不需要每个verId新搞一个文件的，甚至不需要搞新的组件，可以只需内部逻辑处理。
//verId 实际在PeriodicalInspection.E配置文件中reportTemplate配上的。#不是路由器注入提供！！
//@param rep:主报告对象； 这个注入点：没有提供主报告id;需要从rep查找。【重要差别】独立流转的URL跳转后这里rep实际上是分项报告的并不是主报告的对象。
export const ReportView: React.FunctionComponent<ReportViewProps> = (
    {repId,   source: parentOrc,  verId,rep, redId,fxIdx }
) => {
    const theme= useTheme();
    const {urlMainRep}=useMainRepUrlOr(rep);
    const lsBlockMax=5;       //一次显示几个分项报告 最多5个
    const {sumArea, areaIdAs, btnBindUses}=useSplitSubRepList(parentOrc?._THICKM_VS ? parentOrc?._THICKM_VS : [], lsBlockMax,false);
    const { get:getRouteUrl } = useContext(RoutingContext);
    const routeLevels=getRouteUrl().entries.length;
    const routeTemplate=getRouteUrl().entries[routeLevels-1]?.routeData?.params?.template;

    return (
    <React.Fragment>
      <HashLinkObserver />
      <div  id="rp_thickmVs_"  css={{
            "@media not print": {
                marginTop:'1rem',
                marginBottom: '1rem'
            },
      }}>
         <DirectLink  href={`/report/THICKM_VS/ver/${verId}/${repId}/THICKM_VS/_Controller`}>
            <div css={{"@media print":{display: 'none'} }}>
                <Button>壁厚测定报告的分项控制器</Button>
            </div>
         </DirectLink>

        {(new Array(sumArea).fill(null)).map((s:any,ak:number) => {
            const [isDisplay, bindBtn]=btnBindUses[ak];      //不要加上 tabIndex={0}
            return <React.Fragment key={ak}>
                <div key={ak} role="button" {...bindBtn}  css={{"@media print":{display: 'none'}}}>
                    { <Text variant="h4">{`可折叠区${ak+1}，`}{isDisplay ? `收起`:`更多..`}</Text> }
                </div>
                <Collapse id={`${ak}`} show={isDisplay} noAnimated>
                    { areaIdAs[ak]?.map((surpId: any, m:number) => {
                        const orc=parentOrc['_THICKM_VS_'+surpId];
                        const dispIdx=(fxIdx??0) +(m+ ak*lsBlockMax);
                        return <React.Fragment key={m}>
                            <div css={{"@media print": {pageBreakInside: 'avoid' } }}>
                                <Text variant="h3" css={{
                                    textAlign:'center',
                                    "@media (min-width:690px),print and (min-width:538px)": {
                                        fontSize: theme.fontSizes[6],
                                    }
                                }}>
                                    壁厚测定报告{dispIdx? '-'+dispIdx : ''}
                                </Text>
                                <div css={{
                                    display: 'flex',
                                    justifyContent: 'space-between',
                                    flexDirection: 'column',
                                    [theme.mediaQueries.md]: {
                                        flexDirection: 'row',
                                    }
                                }}>
                                    <Text  css={{
                                        [theme.mediaQueries.md]: {
                                            marginLeft: '2rem',
                                        }
                                    }}>
                                        单位内部编号：{parentOrc?.单位内部编号}
                                    </Text>
                                    <Text  css={{
                                        [theme.mediaQueries.md]: {
                                            marginRight: '2rem',
                                        }
                                    }}>
                                        报告编号：{rep.isp.no}
                                    </Text>

                                </div>
                                <Table  fixed={ ["17%","33%","17%","%"]  } css={ {borderCollapse: 'collapse' } } >
                                    <TableBody>
                                        <DirectLink  href={`/report/THICKM_VS/ver/${verId}/${repId}/${surpId}/Instrument`}>
                                            <TableRow>
                                                <CCell>测量仪器型号</CCell>
                                                <CCell>{orc?.仪器型号}</CCell>
                                                <CCell>测量仪器编号</CCell>
                                                <CCell>{orc?.仪器编号}</CCell>
                                            </TableRow>
                                        </DirectLink>
                                    </TableBody>
                                </Table>
                            </div>

                            <Table  fixed={ ["17%","33%","17%","%"]  } css={ {borderCollapse: 'collapse' } } >
                                <TableBody>
                                    <DirectLink  href={`/report/THICKM_VS/ver/${verId}/${repId}/${surpId}/Instrument`}>
                                        <TableRow>
                                            <CCell>测量仪器精度</CCell>
                                            <CCell>{orc?.仪器精度}</CCell>
                                            <CCell>耦合剂</CCell>
                                            <CCell>{orc?.耦合剂}</CCell>
                                        </TableRow>
                                        <TableRow  css={{"@media print": {pageBreakInside: 'avoid'} }}>
                                            <CCell rowSpan={4} css={{padding:0}}>
                                                <Table  fixed={ ["10%","20%"]  }
                                                        css={ {borderCollapse: 'collapse', height:'fill-available'} } >
                                                    <TableBody>
                                                        <TableRow >
                                                            <CCell rowSpan={4}>名义厚度</CCell>
                                                            <CCell>筒体</CCell>
                                                        </TableRow>
                                                        <TableRow >
                                                            <CCell>封头</CCell>
                                                        </TableRow>
                                                        <TableRow >
                                                            <CCell>管箱（夹套）筒体</CCell>
                                                        </TableRow>
                                                        <TableRow >
                                                            <CCell>管箱（夹套）封头</CCell>
                                                        </TableRow>
                                                    </TableBody>
                                                </Table>
                                            </CCell>
                                            <CCell><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                                                <Text >{orc?.筒体名义}</Text>
                                                <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                                    mm</Text>
                                            </div></CCell>
                                            <CCell rowSpan={4} css={{padding:0}}>
                                                <Table  fixed={ ["33%","%"]  }
                                                        css={ {borderCollapse: 'collapse', height:'fill-available'} } >
                                                    <TableBody>
                                                        <TableRow >
                                                            <CCell rowSpan={4}>实测最小壁厚</CCell>
                                                            <CCell>筒体</CCell>
                                                        </TableRow>
                                                        <TableRow >
                                                            <CCell>封头</CCell>
                                                        </TableRow>
                                                        <TableRow >
                                                            <CCell>管箱（夹套）筒体</CCell>
                                                        </TableRow>
                                                        <TableRow >
                                                            <CCell>管箱（夹套）封头</CCell>
                                                        </TableRow>
                                                    </TableBody>
                                                </Table>
                                            </CCell>
                                            <CCell><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                                                <Text >{orc?.筒体实测}</Text>
                                                <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                                    mm</Text>
                                            </div></CCell>
                                        </TableRow>
                                        <TableRow>
                                            <CCell><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                                                <Text >{orc?.封头名义}</Text>
                                                <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                                    mm</Text>
                                            </div></CCell>
                                            <CCell><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                                                <Text >{orc?.封头实测}</Text>
                                                <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                                    mm</Text>
                                            </div></CCell>
                                        </TableRow>
                                        <TableRow>
                                            <CCell><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                                                <Text >{orc?.管筒体名义}</Text>
                                                <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                                    mm</Text>
                                            </div></CCell>
                                            <CCell><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                                                <Text >{orc?.管筒体实测}</Text>
                                                <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                                    mm</Text>
                                            </div></CCell>
                                        </TableRow>
                                        <TableRow>
                                            <CCell><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                                                <Text >{orc?.管封头名义}</Text>
                                                <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                                    mm</Text>
                                            </div></CCell>
                                            <CCell><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                                                <Text >{orc?.管封头实测}</Text>
                                                <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                                    mm</Text>
                                            </div></CCell>
                                        </TableRow>
                                    </DirectLink>
                                    <DirectLink  href={`/report/THICKM_VS/ver/${verId}/${repId}/${surpId}/Surface`}>
                                        <TableRow>
                                            <CCell>表面状况</CCell>
                                            <CCell>{orc?.表面状况}</CCell>
                                            <CCell>实测点数</CCell>
                                            <CCell>{orc?.实测点数}</CCell>
                                        </TableRow>
                                        <TableRow css={{"@media print": {pageBreakInside: 'avoid'} }}>
                                            <Cell colSpan={4} >
                                                测厚点位置示图：&nbsp;{orc?.点图说明}
                                                <div css={{
                                                    display: 'flex',justifyContent: 'space-around',alignItems: 'center',
                                                    // height: '30vh',
                                                    // [theme.mediaQueries.lg+', print']: {height: '6.5cm'}
                                                }}>
                                                    { orc?._FILE_部位?.url &&
                                                        <img src={process.env.REACT_APP_OSS_ENDP+orc?._FILE_部位?.url} alt={orc?._FILE_部位?.url}
                                                             css={{
                                                                 maxHeight: '14cm',   //在这个元素的上一级元素可以自己加一个固定高度值，就像一张纸打印的应该多高的取值。这个用固定高度会导致图片自动的横竖比例不均衡压缩=会变形啊！24cm是纸张大约最多高度=报告最大图片高。
                                                                 //上面这个maxHeight对打印可能没影响，宽度大的图片情况：maxWidth限制了打印，同时同比例地限制高度大小了，原始图片宽度大的，maxHeight就没用。我这里打印图片的不考虑占满纸张高度。
                                                                 maxWidth: '-webkit-fill-available',
                                                                 "@media print": {maxHeight: '26cm', maxWidth: '705px'},         //对A4纸张竖版的高度26cm基本都是图片整张纸，这里没考虑多个图片在宽度方向上的并排布局：可用软件合并。
                                                                 //不能用这个 ['print']: {maxHeight: '24cm', maxWidth: '705px'},
                                                                 [theme.mediaQueries.lg]: {maxHeight: '18cm', maxWidth: undefined}           //普通图片+大屏幕限制高度才是关键的。
                                                                 //合计不能超过A4纸张的竖排默认的px数合计715px；需考虑剪掉相邻元素<td/>占位=10px; A4打印和预览报告的对宽度要求不一致，原始记录编制左半边显示只有一半要求宽度。需要依据printing判别。
                                                             }}
                                                        />
                                                    }
                                                </div></Cell>
                                        </TableRow>
                                    </DirectLink>

                                </TableBody>
                            </Table>

                            <Table  fixed={ ["8.6%","8.06%","8.6%","8.06%","8.6%","8.06%","8.6%","8.06%","8.6%","%"]  } css={ {borderCollapse: 'collapse' } }
                                    printColWidth={ ["60","59","60","59","60","59","60","59","60","59","60","60"] }  >
                                <TableBody>
                                    <DirectLink  href={`/report/THICKM_VS/ver/${verId}/${repId}/${surpId}/Measurement`}>
                                        <TableRow>
                                            <CCell colSpan={12}>测 厚 记 录 （ 测点厚度单位：㎜）</CCell>
                                        </TableRow>
                                        <TableRow>
                                            {(new Array(6).fill(null)).map((a:any,i:number) => {
                                                return (
                                                    <React.Fragment key={i}><CCell>测点编号</CCell><CCell>测点厚度</CCell></React.Fragment>
                                                );
                                            } )  }
                                        </TableRow>
                                        {orc?.测厚表?.map((o: any, i: number) => {
                                            return (
                                                <TableRow key={i}>
                                                    <CCell>{o.no1}</CCell>
                                                    <CCell>{o.vl1}</CCell>
                                                    <CCell>{o.no2}</CCell>
                                                    <CCell>{o.vl2}</CCell>
                                                    <CCell>{o.no3}</CCell>
                                                    <CCell>{o.vl3}</CCell>
                                                    <CCell>{o.no4}</CCell>
                                                    <CCell>{o.vl4}</CCell>
                                                    <CCell>{o.no5}</CCell>
                                                    <CCell>{o.vl5}</CCell>
                                                    <CCell>{o.no6}</CCell>
                                                    <CCell>{o.vl6}</CCell>
                                                </TableRow>
                                            );
                                        } )
                                        }
                                    </DirectLink>
                                    <DirectLink  href={`/report/THICKM_VS/ver/${verId}/${repId}/${surpId}/Surface`}>
                                        <TableRow>
                                            <Cell component="th" scope="row" colSpan={12}><div css={{minHeight: '2rem',whiteSpace:'pre-wrap'
                                            }}><Text css={{ margin: '0 2rem' }}>备注：</Text><br/>
                                                {orc?.memo??'／'}</div></Cell>
                                        </TableRow>
                                        <TableRow>
                                            <Cell colSpan={12}><div css={{minHeight: '2rem',whiteSpace:'pre-wrap'
                                            }}><Text css={{ margin: '0 2rem' }}>检测结果：</Text><br/>
                                                {orc?.检测结果??'／'}</div></Cell>
                                        </TableRow>
                                    </DirectLink>
                                </TableBody>
                            </Table>
                        </React.Fragment>;
                    }) }
                    <TailMenRowIspCheck orc={parentOrc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
                    </TailMenRowIspCheck>
                    <Text css={{fontSize:'0.7rem'}}>
                        注：名义 厚度和实测最小壁厚的栏目根据实际测厚部位的情况填写，部位图较大时，可增加附图页。
                    </Text>
                    <div role="button" {...bindBtn}  css={{"@media print":{display: 'none'}}}>
                        <Text variant="h4">{`可折叠区${ak+1}结束,收起`}</Text>
                    </div>
                </Collapse>

            </React.Fragment>
        })}
      </div>
        {分项末尾链接({template:'THICKM_VS', repId: repId||'',verId,urlMainRep,
            nestIn:'THICKM_VS'!==routeTemplate, flowNest: repId!==rep?.id}) }
     </React.Fragment>
    );
}
